<!--
 * @Descripttion: 条码打印
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-11-13 15:36:44
 * @LastEditors: GW
 * @LastEditTime: 2021-11-13 15:36:44
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="big-main-wrapper warehouse-type-wrapper requisition-set-wrapper" style="margin:2px 8px;">
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">

                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2">
                            <div class="btns" @click="editDataFun(1)">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="showModel=='order'">
                            <div class="btns" @click="openOrderView()">
                                <a-icon class="btns-icon" type="file" />
                                <div class="btns-text">选单</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="printPreview">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">打印预览</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div class="order-warpper-box">
                <section>
                    <div><span class="audit-status" style="z-index:78" v-show="voucherState==1">已审</span></div>
                    <a-form-model :layout="formLayout">
                        <div class="header-box">
                            <a-row class="order-dynamic-form-wrapper">
                                <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                    <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="业务对象名称" :rules="[{ required: true, message:'',trigger:'input'}]">
                                        <a-input v-model.trim="businessObject"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                    <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="明细条码规则" :rules="[{ required: true, message:'',trigger:'input'}]">
                                        <a-input v-model.trim="businessRule"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                    <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="明细条码模板" :rules="[{ required: true, message:'',trigger:'input'}]">

                                        <a-input-group>
                                            <a-row :gutter="0">
                                                <a-col :span="16">
                                                    <a-select style="width:100%;" default-value="Option1">
                                                        <a-select-option value="Option1">
                                                            Option1
                                                        </a-select-option>
                                                        <a-select-option value="Option2">
                                                            Option2
                                                        </a-select-option>
                                                    </a-select>
                                                </a-col>
                                                <a-col :span="8">
                                                    <a-button>查看模板</a-button>
                                                </a-col>
                                            </a-row>
                                        </a-input-group>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                        </div>
                    </a-form-model>
                </section>
                <div class="table-wrapper-box">
                    <a-table :row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }" :columns="columns" :data-source="dataSource" :pagination="false" bordered />
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import { mapState } from "vuex";
import editableCell from "./editTable/EditableCell"
import { getLodop } from "@/utils/tool/LodopFun"
import { listRule, saveRule, deleteRule, getRuleDetails, getVoucherDesign } from "@/api/inventory/barcode";
var LODOP;
export default {
    components: {
        editableCell
    },
    data () {
        return {
            showModel: 'list',
            //----------↓样式----------
            fromStyle: { paddingTop: "8px" },
            labelCol: { span: 10 },
            wrapperCol: { span: 14 },

            grid: {
                xs: 24,
                sm: 24,
                md: 12,
                lg: 8,
                xl: 8,
                xxl: 6
            },
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------
            columns: [{
                title: '单号',
                dataIndex: 'code'
            }, {
                title: '批次',
                dataIndex: 'batch'
            }, {
                title: '编号',
                dataIndex: 'number'
            }, {
                title: '工序',
                dataIndex: 'process'
            }],
            dataSource: [
                { code: 'XXY1-01', batch: '1', number: 'P1面高幢12', process: '1/8', barcode: '215689654871' },
                { code: 'XXY1-02', batch: '1', number: 'P1面高幢12', process: '2/8', barcode: '548512012302' },
                { code: 'XXY1-03', batch: '1', number: 'P1面高幢12', process: '3/8', barcode: '452102130212' },
                { code: 'XXY1-04', batch: '1', number: 'P1面高幢12', process: '4/8', barcode: '231241201242' },
                { code: 'XXY1-05', batch: '1', number: 'P1面高幢12', process: '5/8', barcode: '120512032121' },
            ],
            businessObject: null,       //业务对象
            businessRule: null,         //明细条码规则
            businessTemplate: null,     //明细条码模板
            selectedKeys: [],
            selectedRows: [],
        };
    },
    created () {
        this.HtmStr = "<!DOCTYPE>\n<style>table,td{border:1px solid black;}</style>\n<body style=\"background-color:transparent;margin:0\" >\n<table>\n<tr>\n<td>透明超文本表格</td>\n<td>预览就看出透明</td>\n<td>预览才看出透明</td>\n</tr>\n<tr>\n<td>非表格也能透明</td>\n<td>预览看出透明</td>\n<td>预览看出透明</td>\n</tr>\n</table>";
    },

    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        openOrderView () {
            //选单
        },
        printPreview () {
            //打印预览
            LODOP = getLodop();
            LODOP.PRINT_INIT("打印控件多页预览");
            this.nihao();
            LODOP.PREVIEW();
        },
        nihao () {
            for (let i = 0; i < this.dataSource.length; i++) {
                LODOP.NewPage();

                LODOP.SET_PRINT_MODE("PROGRAM_CONTENT_BYVAR", true);
                LODOP.ADD_PRINT_TABLE(127, 178, 393, 229, "<table class=MsoNormalTable border=1 cellspacing=0 style=\"border-collapse:collapse;width:268.6000pt;margin-left:6.7500pt;\r\nmargin-right:6.7500pt;mso-table-layout-alt:fixed;border:none;\r\nmso-border-left-alt:0.5000pt solid windowtext;mso-border-top-alt:0.5000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;\r\nmso-border-bottom-alt:0.5000pt solid windowtext;mso-border-insideh:0.5000pt solid windowtext;mso-border-insidev:0.5000pt solid windowtext;\r\nmso-padding-alt:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;\">\r\n                                <tr style=\"height:13.7000pt;\">\r\n                                        <td width=358 valign=top colspan=4 style=\"width:268.6000pt;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;\r\nmso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;\r\nborder-top:1.0000pt solid windowtext;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;\r\nmso-border-bottom-alt:0.5000pt solid windowtext;\">\r\n                                                <p class=MsoNormal align=center\r\n                                                        style=\"text-align:center;line-height:24.0000pt;mso-line-height-rule:exactly;\"><b><span\r\n                                                                        style=\"font-family:幼圆;letter-spacing:-0.1000pt;font-weight:bold;\r\nfont-size:10.5000pt;mso-font-kerning:10.5000pt;\">\r\n                                                                        <font face=\"幼圆\">重庆新西亚铝业（集团）股份有限公司</font>\r\n                                                                </span></b><b><span style=\"font-family:幼圆;letter-spacing:-0.1000pt;font-weight:bold;\r\nfont-size:10.5000pt;mso-font-kerning:10.5000pt;\">\r\n                                                                        <o:p></o:p>\r\n                                                                </span></b></p>\r\n                                        </td>\r\n                                </tr>\r\n                                <tr style=\"height:30.9000pt;\">\r\n                                        <td width=28 valign=center style=\"width:21.2500pt;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;\r\nmso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;\r\nborder-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;\r\nmso-border-bottom-alt:0.5000pt solid windowtext;\">\r\n                                                <p class=MsoNormal style=\"line-height:12.0000pt;mso-line-height-rule:exactly;\"><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <font face=\"幼圆\">单</font>\r\n                                                        </span><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <o:p></o:p>\r\n                                                        </span></p>\r\n                                                <p class=MsoNormal style=\"line-height:12.0000pt;mso-line-height-rule:exactly;\"><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <font face=\"幼圆\">号</font>\r\n                                                        </span><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <o:p></o:p>\r\n                                                        </span></p>\r\n                                        </td>\r\n                                        <td width=192 valign=center style=\"width:144.7000pt;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;\r\nmso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;\r\nborder-top:1.0000pt solid windowtext;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;\r\nmso-border-bottom-alt:0.5000pt solid windowtext;\">\r\n                                        </td>\r\n                                        <td width=33 valign=center style=\"width:25.4000pt;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;\r\nmso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;\r\nborder-top:1.0000pt solid windowtext;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;\r\nmso-border-bottom-alt:0.5000pt solid windowtext;\">\r\n                                                <p class=MsoNormal align=center\r\n                                                        style=\"text-align:center;line-height:12.0000pt;mso-line-height-rule:exactly;\"><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <font face=\"幼圆\">批</font>\r\n                                                        </span><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <o:p></o:p>\r\n                                                        </span></p>\r\n                                                <p class=MsoNormal align=center\r\n                                                        style=\"text-align:center;line-height:12.0000pt;mso-line-height-rule:exactly;\"><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <font face=\"幼圆\">次</font>\r\n                                                        </span><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <o:p></o:p>\r\n                                                        </span></p>\r\n                                        </td>\r\n                                        <td width=103 valign=center style=\"width:77.2500pt;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;\r\nmso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;\r\nborder-top:1.0000pt solid windowtext;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;\r\nmso-border-bottom-alt:0.5000pt solid windowtext;\">\r\n                                        </td>\r\n                                </tr>\r\n                                <tr style=\"height:34.9500pt;\">\r\n                                        <td width=28 valign=center style=\"width:21.2500pt;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;\r\nmso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;\r\nborder-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;\r\nmso-border-bottom-alt:0.5000pt solid windowtext;\">\r\n                                                <p class=MsoNormal style=\"line-height:12.0000pt;mso-line-height-rule:exactly;\"><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <font face=\"幼圆\">编</font>\r\n                                                        </span><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <o:p></o:p>\r\n                                                        </span></p>\r\n                                                <p class=MsoNormal style=\"line-height:12.0000pt;mso-line-height-rule:exactly;\"><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <font face=\"幼圆\">号</font>\r\n                                                        </span><span style=\"font-family:幼圆;mso-hansi-font-family:宋体;letter-spacing:-0.1000pt;\r\nfont-size:9.0000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <o:p></o:p>\r\n                                                        </span></p>\r\n                                        </td>\r\n                                        <td width=226 valign=center colspan=2 style=\"width:170.1000pt;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;\r\nmso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;\r\nborder-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;\r\nmso-border-bottom-alt:0.5000pt solid windowtext;\">\r\n                                        </td>\r\n                                        <td width=103 valign=center style=\"width:77.2500pt;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;\r\nmso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;\r\nborder-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;\r\nmso-border-bottom-alt:0.5000pt solid windowtext;\">\r\n                                        </td>\r\n                                </tr>\r\n                                <tr style=\"height:50.1000pt;\">\r\n                                        <td width=255 valign=top colspan=3 style=\"width:191.3500pt;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;\r\nmso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;\r\nborder-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;\r\nmso-border-bottom-alt:0.5000pt solid windowtext;\">\r\n                                        </td>\r\n                                        <td width=103 valign=top style=\"width:77.2500pt;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;\r\nmso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;\r\nborder-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;\r\nmso-border-bottom-alt:0.5000pt solid windowtext;\">\r\n                                                <p class=MsoNormal align=center style=\"text-align:center;\"><span\r\n                                                                style=\"font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;\">\r\n                                                                <o:p>&nbsp;</o:p>\r\n                                                        </span></p>\r\n                                        </td>\r\n                                </tr>\r\n                        </table>");
                LODOP.ADD_PRINT_IMAGE(270, 473, 45, 41, "<img style='height:40px;width:40px;' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.qcsdn.com%2Fimg%2F20190410%2F75849d4984055f0e7f9882b6a2da54d6.png&refer=http%3A%2F%2Fpic.qcsdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639128625&t=1a4ca8b2d3ff640733f21e1f3be68ae9'></img>");
                LODOP.ADD_PRINT_BARCODE(277, 216, 215, 46, "128A", this.dataSource[i].barcode);
                LODOP.ADD_PRINT_TEXT(217, 458, 79, 40, this.dataSource[i].process);
                LODOP.SET_PRINT_STYLEA(0, "FontName", "幼圆");
                LODOP.SET_PRINT_STYLEA(0, "FontSize", 24);
                LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
                LODOP.SET_PRINT_STYLEA(0, "Vorient", 3);
                LODOP.ADD_PRINT_TEXT(174, 237, 158, 33, this.dataSource[i].code);
                LODOP.SET_PRINT_STYLEA(0, "FontName", "幼圆");
                LODOP.SET_PRINT_STYLEA(0, "FontSize", 18);
                LODOP.ADD_PRINT_TEXT(223, 235, 201, 30, this.dataSource[i].number);
                LODOP.SET_PRINT_STYLEA(0, "FontSize", 18);
                LODOP.ADD_PRINT_TEXT(171, 478, 41, 40, this.dataSource[i].batch);
                LODOP.SET_PRINT_STYLEA(0, "FontSize", 20);

            }
        },
        onSelectChange (keys, rows) {
            this.selectedKeys = keys;
            this.selectedRows = rows;
        },
        getVoucherDesign () {
            //获取业务对象
            getVoucherDesign().then(res => {
                if (res.code === 200) {
                    this.businessObject = res.data;
                    this.reload();
                }
            })
        },
    },
};
</script>
<style lang="less">
    // @import '~@/style/setting/inventory.less';
    @import '~@/style/purchase/voucher.less';
    .table-wrapper-box {
        padding: 10px;
    }
    .order-warpper-box {
        overflow-y: auto;
        padding: 10px;
        height: calc(100% - 45px);
    }
    .barcode-box {
        .ant-form-item {
            margin-bottom: 0px;
        }
    }
</style>